<!--
@name:healthConfigDialog
@author:Zhenglei
@date:14:42
@description:healthConfigDialog
@update:2022/5/714:42
-->
<template>
  <div>
    <el-dialog :visible.sync="visible"
               title="慢病签约服务费配置"
               width="50%"
               :before-close="modalClose"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-button type="primary"
                 @click="handleAdd">新 增
      </el-button>
      <element-table class="mt-20"
                     :columns="columns"
                     :data="tableData">
        <template v-slot:price="{row}">
          <div style="display: flex;flex-direction: column;align-items: center">
            <el-tag style="margin-top: 10px;width: 160px" v-for="(item,index) in row.serviceFeeJson" :key="index">{{ item.price }}元服务费：{{ item.serviceFee }}
            </el-tag>
          </div>
        </template>
        <template v-slot:option="{row}">
          <el-button type="danger"
                     @click="handleDel(row)">删除
          </el-button>
        </template>
      </element-table>

    </el-dialog>
    <add-dialog v-if="showDialog"
                :dataObj='dataObj'
                :visible.sync="showDialog"/>
  </div>
</template>

<script>
import ElementTable from "../../../../base/ElementTable";
import addDialog from "./addDialog";

export default {
  name: "healthConfigDialog",
  props: {
    dataObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showDialog: false,
      tableData: [],
      columns: [
        {
          label: '医院名称',
          prop: 'hospitalDto.name',
          align: "center",
        }, {
          label: '套餐包价格',
          prop: 'price',
          align: "center",
          isSlot: true
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 200
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
    getList() {
      this.post(this.api.cooperationHospital.getCDPFeeList, {
        healthCheckPackageId: this.dataObj.id
      }).then((res) => {
        if (res.data.code === '200') {
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum
        }
      })
    },
    handleAdd() {
      this.showDialog = true
    },
    //删除
    handleDel(row){
      this.$confirm('是否要确认?', '提示', {
        type: 'warning'
      }).then(() => {
        this.post(this.api.cooperationHospital.removeCDPFee, {
          id: row.id
        }).then((res) => {
          if (res.data.code === '200') {
            this.$message.success('删除成功')
            this.getList()
          }
        })
      })
    }
  },
  components: {
    'element-table': ElementTable,
    'add-dialog': addDialog
  }
}
</script>

<style scoped>

</style>
